<!--
 * @Description: 上传照片
 * @Author: liu (1427179517@qq.com)
 * @Date: 2023-05-05 10:40:59
 * @LastEditors: liu (1427179517@qq.com)
 * @LastEditTime: 2023-05-13 10:08:44
 * @FilePath: \jiekuan-app\src\subPages\other\uploadPhotos.vue
-->
<template>
  <div class="page">
    <div class="page-header">
      <u-navbar
        title="上传照片"
        :background="nav_background"
        title-color="#fff"
        back-icon-color="#fff"
        :height="60"
        :border-bottom="false"
      ></u-navbar>
    </div>
    <div class="page-content u-p-40">
      <div class="title u-m-b-20">相册 ({{ albumList.length }}/9)</div>
      <uploadView
        uploadText=""
        ref="upload"
        moduleName="upload"
        :maxCount="9"
        :fileList="albumList"
        @onChange="handleUploadChange"
        @onPreview="handleUploadPreview"
        @onRemove="handleUploadRemove"
        class="uploadViewId"
        :width="200"
        :height="200"
      >
      </uploadView>
    </div>
    <div class="page-footer">
      <div class="btn_box">
        <button class="btn" @click="handleClick({ type: 'save' })">保存</button>
      </div>
    </div>
  </div>
</template>

<script>
import uploadView from '@/components/yl-uploadView'
export default {
  name: 'UploadPhotos', // 页面名称
  components: { uploadView }, // 挂载组件
  props: {}, // 组件传值
  data() {
    return {
      nav_background: { background: 'transparent' },
      albumList: [], //
    }
  },
  computed: {}, // 计算机属性 类似与data概念
  watch: {}, // 监控data中数据变化
  created() {}, // 生命周期-创建完成(可以访问当前this实例)
  mounted() {}, // 生命周期-挂载完成(可以访问DOM元素)
  methods: {
    // 页面点击事件
    handleClick(options) {
      const { type } = options
      switch (type) {
        case 'save':
          this.$toast('相册上传成功')
          break
        default:
          break
      }
    },
    // 获取用户相册信息
    apiGetAlbumInfo() {
      this.$u.api.GetAlbumInfo().then((res) => {
        const list = []
        res.data.forEach((item) => {
          const msg = {
            url: item.sourceUrl,
            fileType: item.sourceType ? 'video' : '',
          }
          list.push(msg)
        })
        this.albumList = list
      })
    },
    // 相册更新/图片/视频上传
    apiPostUpdateAlbum(type, img) {
      const params = {
        approveFlag: 0,
        sourceType: type,
        sourceUrl: img,
        readType: this.checked ? 1 : 0,
      }
      this.$u.api.PostUpdateAlbum(params).then((res) => {})
    },
    /**
     * @author: yiling (315800015@qq.com)
     * @description: 全屏预览图片时触发
     * @param {String} url 为当前选中的图片地址
     * @param {Array} lists 目前组件内的所有图片数组，index为通过props传递的index参数
     * @param {Number} name 为通过props传递的index参数(1.6.1加入)
     * @return {*}
     * @Date: 2021-04-17 11:36:57
     */
    handleUploadPreview(options) {
      uni.setStorageSync('uploadRefresh', true)
    },
    /**
     * @author: yiling (315800015@qq.com)
     * @description: 移除图片时触发
     * @param {Number} index 索引
     * @param {Array} lists 完整数据
     * @param {Number} name 通过props传递的index参数
     * @return {*}
     * @Date: 2021-04-18 13:09:47
     */
    handleUploadRemove(options) {
      const { index, lists, name, moduleName } = options
      console.log('onRemove', options)
      this.albumList.splice(index, 1)
    },
    /**
     * @author: yilingsj（315800015@qq.com）
     * @description: 上传后触发
     * @param {type}
     * @return:
     * @Date: 2020-07-20 10:43:06
     */
    handleUploadChange(options) {
      console.log(options, '引用后上传结束')
      const { res, index, lists, moduleName } = options
      const data = JSON.parse(res.data)
      const suffixArr = lists[index].url.split('.')
      if (['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'].includes(suffixArr[1])) {
        this.albumList.push({ url: data.data })
        this.apiPostUpdateAlbum("img", data.data)
      } else {
        this.video = data.data
        this.albumList.push({ url: data.data, fileType: 'video' })
        this.apiPostUpdateAlbum("video", data.data)
      }
    },
  }, // 挂载一些方法
  onLoad(options) {
    this.apiGetAlbumInfo()
    console.log('onLoad', options, Date.now())
  }, // 生命周期回调—监听页面加载
  onShow() {}, // 生命周期回调—监听页面显示
  onReady() {}, // 生命周期回调—监听页面初次渲染完成
  onHide() {}, // 生命周期回调—监听页面隐藏
  onUnload() {}, // 生命周期回调—监听页面卸载
}
</script>

<style lang="scss" scoped>
.page {
  background-image: url('http://minio.tianhong.mobi/mall/xiaoq/home_bg.png');
  width: 100%;
  height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
}
.page-header,
.page-content,
.page-footer {
  background: transparent;
}
.title {
  font-size: 31rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
}
.btn_box {
  padding: 0 195rpx 120rpx;
}
.btn {
  width: 360rpx;
  height: 90rpx;
  background: #fcc307;
  border-radius: 45rpx;
  font-size: 33rpx;
  font-family: Microsoft YaHei UI;
  font-weight: 400;
  color: #ffffff;
  line-height: 90rpx;
}
</style>
